<template>
  <view class="page">
    <uni-nav-bar
      title="门店列表"
      left-icon="home"
      showMenuButtonWidth
      statusBar
      color="#333"
      backgroundColor="#fff"
      :border="false"
      @clickLeft="$tools.back"
    />
    <map
      v-show="showMap"
      class="map"
      id="map"
      ref="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="markers"
    />
    <view
      class="map-control"
      @tap="toggleMap"
    >
      <view class="mr-sm">{{ showMap ? "收起地图" : "展开地图" }}</view>
      <uni-icons
        :type="showMap ? 'up' : 'down'"
        size="16"
        color="#AAAAAA"
      />
    </view>
    <scroll-view
      scroll-y
      :style="{ height: scrollHeight + 'px' }"
    >
      <view class="store-list">
        <view
          v-for="(item, index) in stores"
          :key="index"
          class="store"
        >
          <view class="store-left">
            <view class="store-name">{{ item.shopName }}</view>
            <view class="store-tags">
              <view class="store-tag">营业中</view>
              <view class="store-tag plain">可外送</view>
            </view>
            <view>营业时间：{{ item.operationTime }}</view>
            <view class="lh-base">
              直线距离{{ item.distance }}
              <text class="mx-xs">|</text>
              {{ item.regionName || "" }}{{ item.shopAddress }}
            </view>
          </view>
          <view class="store-divider"></view>
          <view class="store-right">
            <image
              class="store-icon"
              src="/pages/store/static/unfavorited.png"
            />
            <text>去下单</text>
            <view class="d-flex items-center gap-base">
              <image
                class="store-icon"
                src="/pages/store/static/icon_navigate.png"
              />
              <image
                class="store-icon"
                src="/pages/store/static/icon_phone.png"
              />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { mapState } from "vuex"
export default {
  name: "store-list",
  data() {
    return {
      _mapContext: null,
      longitude: "",
      latitude: "",
      scale: 15,
      showMap: true
    }
  },
  computed: {
    ...mapState("store", ["stores"]),
    scrollHeight() {
      return (
        uni.getSystemInfoSync().windowHeight -
        uni.getSystemInfoSync().statusBarHeight -
        44 -
        uni.upx2px(80) -
        (this.showMap ? uni.upx2px(520) : 0)
      )
    }
  },
  onReady() {
    const firstStore = this.stores[0]
    this.longitude = firstStore.longitude
    this.latitude = firstStore.latitude
    this._mapContext = uni.createMapContext("map", this)
    const markers = [
      {
        id: 1,
        longitude: firstStore.longitude,
        latitude: firstStore.latitude,
        iconPath: "/pages/store/static/icon_shop_busy.png",
        width: 50,
        height: 50,
        label: {
          content: firstStore.shopName + "\n" + firstStore.shopAddress,
          color: "#fff",
          bgColor: "rgba(0, 0, 0, 0.5)",
          fontSize: 13,
          padding: 5,
          borderRadius: 5
        }
      }
    ]
    this._mapContext.addMarkers({ markers })
  },
  methods: {
    toggleMap() {
      this.showMap = !this.showMap
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  width: 750rpx;
  height: 100vh;
}

.map {
  width: 750rpx;
  height: 520rpx;
}

.map-control {
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-top: 10rpx;
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
}

.store-list {
  padding: $uni-spacing-row-base;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-base;
}

.store {
  background: #fff;
  display: flex;
  align-items: stretch;
  border-radius: $uni-border-radius-xl;
  padding: $uni-spacing-row-lg;

  &-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    color: #777;
    font-size: $uni-font-size-sm;
  }

  &-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $uni-spacing-row-base;
  }

  &-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $uni-spacing-row-sm $uni-spacing-row-base;
    border-radius: $uni-border-radius-lg;
    color: #fff;
    background: $uni-color-primary;
    font-size: $uni-font-size-sm;

    &.plain {
      color: $uni-color-primary;
      background-color: rgba($uni-color-primary, 0.1);
    }
  }

  &-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: $uni-spacing-row-lg;
    color: $uni-text-color;
    font-size: $uni-font-size-sm;
  }

  &-name {
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
    font-weight: bold;
  }

  &-icon {
    width: 40rpx;
    height: 40rpx;
  }

  &-divider {
    display: block;
    width: 1px;
    height: 160rpx;
    background: #e7e7e7;
    margin: 0 $uni-spacing-row-xxl;
    align-self: center;
  }
}
</style>
